import React, { PureComponent } from "react";
import { connect } from "dva";
import Link from 'umi/link';
import { Modal, Row, Col, Cascader, Select, Form } from "antd";


const { Option } = Select;


function fn(data, pid) {
  let result = [], temp;
  if(data && pid){
    for (let i in data) {
      if (data[i].parentId == pid) {
        result.push(data[i]);
        temp = fn(data, data[i].districtId);
        if (temp.length > 0) {
          data[i].children = temp;
        }
      }
    }
  }
  return result;
}

Array.prototype.ToTreeJson = function (pid) {
  let result = [], temp;
  for (let i in this) {
    if (this[i].parentId == pid) {
      result.push(this[i]);
      temp = fn(this, this[i].districtId);
      if (temp.length > 0) {
        this[i].children = temp;
      }
    }
  }
  return result;
}



export default class RegionalSelection extends PureComponent {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      districtId: value.districtId || [],
      pointId: value.pointId || 0,
    };
  }

  componentDidMount() {

  }


  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }

  handleSearchDistrict = (value, selectedOptions) =>{
    if(selectedOptions.length>0){
      // const targetOption = selectedOptions[selectedOptions.length - 1];
      // const districtId = targetOption.districtId;
      const districtId=value;

      if (!('value' in this.props)) {
        this.setState({districtId});
      }
      this.triggerChange({ districtId, loadPoint:true });

    }else{
      // 清空操作
      if (!('value' in this.props)) {
        this.setState({
          districtId:[],
          pointId:0,
        });
      }
      this.triggerChange({
        districtId:[],
        pointId:0,
        loadPoint:false,
      });

    }
  }

  handleSearchPoint = (pointId) =>{
    if(pointId){
      if (!('value' in this.props)) {
        this.setState({pointId});
      }
      this.triggerChange({ pointId, loadPoint:false });

    }else{
      // 清空操作
      // 清空操作
      if (!('value' in this.props)) {
        this.setState({
          pointId:0,
        });
      }
      this.triggerChange({
        pointId:0,
        loadPoint:false,
      });

    }
  }


  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  }




  render() {
    const { districtData, pointData } = this.props;
    const { districtId, pointId} = this.state;

    return (
      <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{height:55}}>
        <Col md={12} sm={24} style={{paddingRight:6}}>
              <Cascader
                options={districtData && districtData.length>0 ? districtData.ToTreeJson(0) : []}
                onChange={this.handleSearchDistrict}
                value={districtId===0 ? undefined : districtId}
                allowClear={true}
                placeholder={"请选择区域"}
                fieldNames={{label: 'districtName', value: 'districtId', children: 'children' }}
                getPopupContainer={triggerNode => triggerNode.parentNode}
              />
        </Col>
        <Col md={12} sm={24} style={{paddingLeft:6}}>
              <Select
                placeholder="请选择点位"
                value={pointId===0 ? undefined : pointId}
                disabled={districtId!==0 && districtId && districtId.length>0 ? false : true}
                onChange={this.handleSearchPoint}
                allowClear={true}
                getPopupContainer={triggerNode => triggerNode.parentNode}
              >
                {pointData && pointData.length>0 && pointData.map(item => (
                  <Option key={item.pointId} value={item.pointId}>{item.pointName}</Option>
                ))}
              </Select>
        </Col>
      </Row>
    );
  }
}
